﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background: #202020;
        }
    </style>
    
</head>
<body>
    <div id="makezhuanpan" style="width:520px;height:500px; "></div>
</body>
</html>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/echarts/echarts.js"></script>



<script>
    $(document).ready(function () {


        require.config({
            paths: {
                echarts: 'js/echarts/'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/gauge',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                'echarts/chart/line',
                'echarts/chart/bar',
                'echarts/chart/pie',
            ],
            function (ec) {
              
                var myChartzhuanpan = ec.init(document.getElementById('makezhuanpan'));

                //转盘
                optionzhuanpan = {
                    title: {
                        text: '这里是标题',
                        subtext: '30%',
                        x: 'center',
                        y: 'center',
                        textStyle: {//标题文本样式
                            baseline: 'middle',//文字位置
                            fontSize: '22',//文字大小
                            color: '#d5d5d5',
                            fontFamily: '微软雅黑',
                            fontWeight: 300
                        },
                        subtextStyle: {//副标题文本样式
                            fontSize: '19',//文字大小
                            color: '#d5d5d5',
                            fontFamily: '微软雅黑',
                            fontWeight: 300
                        }
                    },
                    tooltip: {
                        show: false,
                    },
                    legend: {
                        show: false,
                        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
                    },
                    toolbox: {
                        show: false,
                    },
                    calculable: false,
                    series: [

                        {
                            name: '进度',
                            type: 'pie',
                            startAngle: 165,//控制圆形开始的角度 每一个相隔30度 1-105  2-135  3-165  12-435
                            selectedMode: 'single',
                            selectedOffset: 15,
                            radius: [100, 180],
                            itemStyle: {
                                normal: {
                                    color: 'rgba(48,176,171,0.2)',//扇形默认的颜色 --未开始的状态
                                    position: 'center',
                                    textStyle: {
                                        fontSize: '22',
                                        fontFamily: '微软雅黑',
                                        color: '#d5d5d5',
                                    },
                                    borderWidth: 1,
                                    borderColor: '#282828',
                                    label: {
                                        position: 'inner'
                                    },
                                    labelLine: {
                                        show: false
                                    }
                                },
                                emphasis: {
                                    color: 'rgba(0,0,0,0)'
                                }
                            },
                            funnelAlign: 'right',

                            data: [
                                {
                                    value: 30,
                                    name: '1',
                                    itemStyle: {
                                        normal: {
                                            color: '#4a817e',//已开始，缺少数据--豆绿色
                                        },
                                        emphasis: {
                                            color: 'rgba(0,0,0,0)'
                                        }
                                    },
                                },
                                {
                                    value: 30,
                                    name: '2',
                                    itemStyle: {
                                        normal: {
                                            color: '#038f89',//完成时候的颜色--绿色
                                        },
                                        emphasis: {
                                            color: 'rgba(0,0,0,0)'
                                        }
                                    },
                                },
                                {
                                    value: 30,
                                    name: '3',
                                    selected: false,//当前突出的扇形
                                    itemStyle: {
                                        normal: {
                                            color: '#e15248',//正在进行中的颜色--桃红色
                                        },
                                        emphasis: {
                                            color: 'rgba(0,0,0,0)'
                                        }
                                    },
                                },
                                {
                                    value: 30,
                                    name: '4',
                                    selected: true,//当前突出的扇形
                                    itemStyle: {
                                        normal: {
                                            color: '#e15248',//正在进行中的颜色--桃红色
                                        },
                                        emphasis: {
                                            color: 'rgba(0,0,0,0)'
                                        }
                                    },
                                },
                                { value: 30, name: '5' },
                                { value: 30, name: '6' },
                                { value: 30, name: '7' },
                                { value: 30, name: '8' },
                                { value: 30, name: '9' },
                                { value: 30, name: '10' },
                                { value: 30, name: '11' },
                                { value: 30, name: '12' }
                            ]
                        }
                    ]
                };

                var ecConfigZ = require('echarts/config');

                function eZhuanpan(param) {
                    $(".m-b-change").hide();
                    $(".m-b-change").eq(param.dataIndex).show();
                }
                myChartzhuanpan.on(ecConfigZ.EVENT.CLICK, eZhuanpan);
                myChartzhuanpan.setOption(optionzhuanpan);
            }
        );


    })
</script>


